<%--
  添加like模板
  User: guoyao
  Date: 14-06-20
  Time: 下午2:55
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/tags/taglibs.jsp" %>
<html>
<head>
    <title>添加信息</title>
</head>
<body>
<style>
    body {
        margin: 0;
        text-align: center;
    }

    #clipArea {
        margin: 0 auto;
        width: 900px;
        height: 550px;
    }

    #file, #clipBtn {
        margin: 20px;
    }

    #view {
        margin: 0;
        width: 160px;
        height: 160px;
    }
</style>
<div class="easyui-layout" data-options="fit:true">
    <form id="updateForm" method="post">
        <div data-options="region:'center',border:false" style="padding:5px;background:#fff;border:1px solid #ccc;">
            <table class="doc-table">
                <tr>
                    <th width="15%"></th>
                    <th width="50%"></th>
                </tr>
                <tr>
                    <td class="labelTd">单词ID:</td>
                    <td colspan="3">
                        <input type="text" class="easyui-validatebox"  name="wordId" data-options="required:true"
                               value="${wordQuery.wordId}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">标题:</td>
                    <td colspan="3">
                        <input type="text" class="easyui-validatebox" style="width: 200px;" name="wordTitle" data-options="required:true"
                               value="${wordQuery.wordTitle}">
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">关键词:</td>
                    <td colspan="3">
                        <input class="easyui-validatebox" name="keyWord" style="width: 350px;" data-options=" required:true"
                               value="${wordQuery.keyWord}"/>
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">摘要:</td>
                    <td colspan="3">
                        <textarea style="overflow:auto;border:1;width:350px;height:55px;font-size: 12px;" name="summary"
                                  data-options=" required:true">${wordQuery.summary}</textarea>
                        <%--<input class="easyui-textbox" data-options="multiline:true" name="summary"
                               value=""
                               style="width:300px;height:100px"/>--%>
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">发布状态:</td>
                    <td>
                        <input id="video_state" class="easyui-combobox" name="state"
                               data-options="
                                     url:'<c:url value="/sys/queryComboboxByDict.html?type=WORD_STATE&selected=${wordQuery.state}" />',
                                     method:'get',
                                     valueField:'id',
                                     validType: 'selectValueRequired',
                                     panelHeight:'auto',
                                     validType: 'selectValueRequired',
                                     onLoadError: function (httpRequest) {
                                         displayJsonError(httpRequest);
                                     }
                                 ">
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">图片:</td>
                    <td colspan="3">
                        <input type="hidden" name="images" value="" id="images"/>

                        <div id="view"><img src="${wordQuery.imagePath}" height="160" width="160"></div>
                        <a href="#modal" class="easyui-linkbutton">上传图片></a>
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">内容:</td>
                    <td colspan="3">
                        <script id="myEditor" type="text/plain"
                                style="width:690px;height:300px;">${wordQuery.content}</script>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input id="content" name="content" hidden="hidden">
                    </td>
                </tr>
            </table>
        </div>
        <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0;">
            <a href="javascript:void(0)" id="product_submit" class="easyui-linkbutton" iconCls="icon-ok"
               onclick="hasContent()">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="closeUM()">取消</a>
        </div>
    </form>
</div>
<div class="remodal" style="max-width:970px;" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title"
     aria-describedby="modal1Desc">
    <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
    <div id="clipArea" class="crop_pis"></div>
    <input type="file" id="file">
    <button id="clipBtn" data-remodal-action="confirm">截取</button>
</div>
<script src="${ctx}/static/demo/photo_clip/iscroll-zoom.js"></script>
<script src="${ctx}/static/demo/photo_clip/hammer.js"></script>
<script src="${ctx}/static/demo/photo_clip/jquery.photoClip.js"></script>
<link rel="stylesheet" href="${ctx}/static/demo/remodal/remodal.css">
<link rel="stylesheet" href="${ctx}/static/demo/remodal/remodal-default-theme.css">
<script src="${ctx}/static/demo/remodal/remodal.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $(".panel-tool-close").on('click', function () {
            closeUM();
        });
        var remodalNum = $('.remodal').size();
        if (remodalNum > 1) {
            $('.remodal').eq(0).remove();
        }
    });
    //实例化编辑器
    var um = UM.getEditor('myEditor');
    um.addListener('blur', function () {
        $('#focush2').html('编辑器失去焦点了')
    });
    um.addListener('focus', function () {
        $('#focush2').html('')
    });

    function hasContent() {
        var text = UM.getEditor('myEditor').hasContents();
        if (text == false) {
            alert("请先填写内容！");
            return;
        }
        var content = UM.getEditor('myEditor').getContent();
        $('#content').val(content);
        closeUM();
        updateSubmit();
    }


    $("#clipArea").photoClip({
        width: 400,
        height: 400,
        file: "#file",
        view: "#view",
        ok: "#clipBtn",
        strictSize: false,
        loadStart: function () {
            $('#view').html('');
        },
        loadComplete: function () {
        },
        clipFinish: function (dataURL) {
            $('#images').val(dataURL);
        }
    });

    function closeUM() {
        // 关闭前移除编辑器
        UM.getEditor('myEditor').destroy();
        closeWindow()
    }
</script>
</body>
</html>
